<template>
  <div>
      <el-dialog :visible.sync="popPat" title="病人输血视图" :close-on-click-modal="false" :center="true" v-el-drag-dialog width="830px">
          <div style="height:500px;position:relative;width:100%">
              <el-form :inline="true" :model="patInfo" @submit.native.prevent label-width="auto" ref="formPat" style="border:1px solid #ccc">
                  <el-tabs type="border-card" style="height:100%;width:100%;position:absolute">
                      <el-tab-pane label="基本信息" style="overflow-y:auto">
                          <el-card>
                              <div slot="header" class="clearfix">
                                  <span>患者基本信息</span>
                              </div>
                              <div>
                                  <div v-html="patInfo.patInfo" style="padding:5px"></div>
                              </div>
                          </el-card>
                          <el-card>
                              <div slot="header" class="clearfix">
                                  <span>本次入院信息</span>
                              </div>
                              <div>
                                  <div v-html="patInfo.currentInfo" style="padding:5px"></div>
                              </div>
                          </el-card>

                      </el-tab-pane>
                      <el-tab-pane label="输血申请信息" style="overflow-y:auto;overflow-x:auto">
                          <div v-html="patInfo.orderInfo" @click="clickID($event)" style="padding:5px"></div>
                      </el-tab-pane>
                      <el-tab-pane label="医嘱信息" style="overflow-y:auto;overflow-x:auto">
                          <div v-html="patInfo.barcodeInfo" @click="clickID($event)" style="padding:5px"></div>
                      </el-tab-pane>
                      <el-tab-pane label="输注记录" style="overflow-y:auto;overflow-x:auto">
                          <div v-html="patInfo.infusionInfo" @click="clickID($event)" style="padding:5px"></div>
                      </el-tab-pane>
                      <el-tab-pane label="不良反应史" style="overflow-y:auto;overflow-x:auto">
                          <div v-html="patInfo.reaInfo" @click="clickID($event)" style="padding:5px"></div>
                      </el-tab-pane>
                      <el-tab-pane label="输血前检查结果" style="overflow-y:auto">
                          <div v-html="patInfo.itemInfo" @click="clickID($event)" style="padding:5px"></div>
                      </el-tab-pane>
                  </el-tabs>
              </el-form>
          </div>
          <div style="text-align:right;padding-top:5px">
              <el-button @click="afterCall(4)">取消</el-button>
          </div>
      </el-dialog>
      <el-dialog :visible.sync="popBag" title="血袋视图" :close-on-click-modal="false" :center="true" v-el-drag-dialog width="830px">
          <div style="height:500px;position:relative;width:100%">
              <el-form :inline="true" @submit.native.prevent label-width="auto" ref="formBag" style="border:1px solid #ccc">
                  <el-tabs type="border-card" style="height:100%;width:100%;position:absolute">
                      <el-tab-pane v-for="item in bagInfo" :key="item.bagid" :label="item.bagname" style="overflow-y:auto">
                          <el-card>
                              <div slot="header" class="clearfix">
                                  <span>血袋基本信息</span>
                              </div>
                              <div>
                                  <div v-html="item.bagBaseInfo" style="padding:5px"></div>
                              </div>
                          </el-card>
                          <el-card>
                              <div slot="header" class="clearfix">
                                  <span>血袋配血信息</span>
                              </div>
                              <div>
                                  <div v-html="item.bagMixInfo" @click="clickID($event)" style="padding:5px"></div>
                              </div>
                          </el-card>
                          <el-card v-show="item.bagReaInfo!=''">
                              <div slot="header" class="clearfix">
                                  <span>输注不良反应信息</span>
                              </div>
                              <div>
                                  <div v-html="item.bagReaInfo" style="padding:5px"></div>
                              </div>
                          </el-card>
                          <el-card>
                              <div slot="header" class="clearfix">
                                  <span>血袋操作记录</span>
                              </div>
                              <div>
                                  <div v-html="item.bagOpInfo" style="padding:5px"></div>
                              </div>
                          </el-card>
                      </el-tab-pane>
                  </el-tabs>
              </el-form>
          </div>
          <div style="text-align:right;padding-top:5px">
              <el-button @click="afterCall(1)">取消</el-button>
          </div>
      </el-dialog>
      <el-dialog :visible.sync="popOrder" title="输血申请单视图" :close-on-click-modal="false" :center="true" v-el-drag-dialog width="830px">
          <div style="height:500px;position:relative;width:100%">
              <el-form :inline="true" :model="orderInfo" @submit.native.prevent label-width="auto" ref="formOrder" style="border:1px solid #ccc">
                  <el-tabs type="border-card" style="height:100%;width:100%;position:absolute">
                      <el-tab-pane label="基本信息" style="overflow-y:auto">
                          <el-card>
                              <div slot="header" class="clearfix">
                                  <span>申请单基本信息</span>
                              </div>
                              <div>
                                  <div v-html="orderInfo.orderBaseInfo" @click="clickID($event)" style="padding:5px"></div>
                              </div>
                          </el-card>
                          <el-card>
                              <div slot="header" class="clearfix">
                                  <span>申请单操作记录</span>
                              </div>
                              <div>
                                  <div v-html="orderInfo.orderOpInfo" style="padding:5px"></div>
                              </div>
                          </el-card>
                      </el-tab-pane>
                      <el-tab-pane label="输血前评估" style="overflow-y:auto">
                          <div v-html="orderInfo.appInfo" style="padding:5px"></div>
                      </el-tab-pane>
                      <el-tab-pane label="输血前检测指标" style="overflow-y:auto">
                          <div v-html="orderInfo.itemInfo" style="padding:5px"></div>
                      </el-tab-pane>
                      <el-tab-pane label="输血检验医嘱" style="overflow-y:auto">
                          <div v-html="orderInfo.reqInfo" @click="clickID($event)" style="padding:5px"></div>
                      </el-tab-pane>
                      <el-tab-pane label="配血记录" style="overflow-y:auto">
                          <div v-html="orderInfo.mixInfo" @click="clickID($event)" style="padding:5px"></div>
                      </el-tab-pane>
                      <el-tab-pane label="输注记录与反馈" style="overflow-y:auto">
                          <div v-html="orderInfo.infusionInfo" @click="clickID($event)" style="padding:5px"></div>
                      </el-tab-pane>
                      <el-tab-pane label="输血后评价" style="overflow-y:auto">
                          <div v-html="orderInfo.evalInfo" style="padding:5px"></div>
                      </el-tab-pane>
                  </el-tabs>
              </el-form>
          </div>
          <div style="text-align:right;padding-top:5px">
              <el-button @click="afterCall(2)">取消</el-button>
          </div>
      </el-dialog>
      <el-dialog :visible.sync="popBarcode" title="送检标本视图" :close-on-click-modal="false" :center="true" v-el-drag-dialog width="830px">
          <div style="height:500px;position:relative;width:100%">
              <el-form :inline="true" v-model="barcodeInfo" @submit.native.prevent label-width="auto" ref="formBarcode" style="border:1px solid #ccc;">
                  <el-tabs type="border-card" style="height:100%;width:100%;position:absolute">
                      <el-tab-pane label="基本信息" style="overflow-y:auto">
                          <el-card>
                              <div slot="header" class="clearfix">
                                  <span>标本基本信息</span>
                              </div>
                              <div>
                                  <div v-html="barcodeInfo.patInfo" @click="clickID($event)" style="padding:5px"></div>
                              </div>
                          </el-card>
                          <el-card>
                              <div slot="header" class="clearfix">
                                  <span>条码使用信息</span>
                              </div>
                              <div>
                                  <div v-html="barcodeInfo.matchInfo" @click="clickID($event)" style="padding:5px"></div>
                              </div>
                          </el-card>
                          <el-card>
                              <div slot="header" class="clearfix">
                                  <span>申请项目信息</span>
                              </div>
                              <div>
                                  <div v-html="barcodeInfo.detailInfo" style="padding:5px"></div>
                              </div>
                          </el-card>
                      </el-tab-pane>
                      <el-tab-pane label="标本相关结果" style="overflow-y:auto;overflow-x:auto">
                          <div v-html="barcodeInfo.resultInfo" style="padding:5px"></div>
                      </el-tab-pane>
                      <el-tab-pane label="标本操作记录" style="overflow-y:auto;overflow-x:auto">
                          <div v-html="barcodeInfo.opInfo" style="padding:5px"></div>
                      </el-tab-pane>
                  </el-tabs>
              </el-form>
          </div>
          <div style="text-align:right;padding-top:5px">
              <el-button @click="afterCall(3)">取消</el-button>
          </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
      return {
          popPat: false,
          patInfo: {},
          popBag: false,
          bagInfo: [],
          popOrder: false,
          orderInfo: {},
          popBarcode: false,
          barcodeInfo: {},
          pageFlag: ""
      };
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {},
  methods: {
      openView(searchStr, flag, key2) {
          var that = this;
          that.pageFlag = flag;
          this.$tool
              .request({
                  url: "/ucent/syspanel",
                  method: "post",
                  data: {
                      action: "getinfo",
                      searchstr: searchStr,
                      flag: flag,
                      addstr: key2
                  }
              })
              .then(res => {
                  if (res.errcode == "0") {
                      that.$alert(res.errmsg, "提示");
                  } else {
                      if (flag == 1 || flag == 5) {
                          that.bagInfo = res.data;
                          that.popBag = true;
                      } else if (flag == 2) {
                          that.orderInfo = res.data;
                          that.popOrder = true;
                      } else if (flag == 3) {
                          that.barcodeInfo = res.data;
                          that.popBarcode = true;
                      } else if (flag == 4) {
                          that.patInfo = res.data;
                          that.popPat = true;
                      }
                  }
              })
              .catch(e => {
                  this.$alert(e);
              });
      },
      hidePages() {
          this.popBag = false;
          this.popOrder = false;
          this.popBarcode = false;
          this.popPat = false;
      },
      hidePage(flag) {
          if (flag == 1 || flag == 5) {
              this.popBag = false;
          } else if (flag == 2) {
              this.popOrder = false;
          } else if (flag == 3) {
              this.popBarcode = false;
          } else if (flag == 4) {
              this.popPat = false;
          }
      },
      afterCall(flag) {
          this.hidePage(flag);

          this.$emit("afterCall", 0);
      },
      clickID(e) {
          var key = e.target.getAttribute("data-key");
          var type = e.target.getAttribute("data-type");
          if (type == "to") {
              this.$emit("afterCall", 1, key);
              this.hidePages();
          } else if (type == "order") {
              this.hidePage(2);
              this.openView(key, 2);
          } else if (type == "pat") {
              this.hidePage(4);
              var key2 = e.target.getAttribute("data-key2");
              this.openView(key, 4, key2);
          } else if (type == "bag") {
              this.hidePage(5);
              this.openView(key, 5);
          } else if (type == "barcode") {
              this.hidePage(3);
              this.openView(key, 3);
          }
      }
  }
};
</script>

<style scoped>
::v-deep .el-dialog--center .el-dialog__body {
  padding: 5px 10px 15px;
  color: #606266;
  font-size: 12px;
  word-break: break-all;
}
::v-deep .dialog-title {
  display: inline-block;
  margin-right: 2px;
  font-size: 12px;
  font-weight: normal;
  color: #2a2798;
  font-weight: 100;
}
::v-deep .dialog-data {
  display: inline-block;
  margin-right: 5px;
}
</style>
